import { createVNode, render, getCurrentInstance } from 'vue'

import AcceptDialog from './Accept.vue'
import CancelDialog from './Cancel.vue'
import ProcessDialog from './Process.vue'

export function openAcceptDialog(props) {
  const vm = createVNode(AcceptDialog, props)
  const container = document.createElement('div')

  render(vm, container)
  document.body.appendChild(container);
}

export function useDialog() {
  // get parent ctx
  const { appContext } = getCurrentInstance()

  function open(component, props = {}) {
    const vm = createVNode(component, {
      visible: true,
      ...props
    })
    vm.appContext = { ...appContext }

    const container = document.createElement('div')

    container.setAttribute('id', 'dialog-ttt')

    render(vm, container)
    document.body.appendChild(container);
  }

  return {
    accept: (props) => open(AcceptDialog, props),
    cancel: (props) => open(CancelDialog, props),
    process: (props) => open(ProcessDialog, props)
  }
}
